<template>
	<div class="h-[30px] flex items-center" :class="{ 'mt-group-t': mt, 'mb-group-b': mb }">
		<base-image
			v-if="image"
			:src="image"
			:default="imageDefault"
			type="network"
			class="h-[20px] rounded-full filter-primary"></base-image>
		<base-icon
			v-else
			:name="icon"
			:color="disabled ? 'var(--color-text-3)' : iconColor"
			size="20"></base-icon>
		<base-text
			:text="title"
			:text-t="titleT"
			class="ml-1 text-[18px] app-font-bold"
			:class="disabled ? 'text-t-3' : 'text-t-1'" />
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon, BaseText, BaseImage } from '@/components/base'

defineProps({
	title: {
		type: String,
		default: ''
	},
	titleT: {
		type: String,
		default: ''
	},
	image: {
		type: String,
		default: ''
	},
	imageDefault: {
		type: String,
		default: ''
	},
	icon: {
		type: String,
		default: ''
	},
	iconColor: {
		type: String,
		default: ''
	},
	disabled: {
		type: Boolean,
		default: false
	},
	mt: {
		type: Boolean,
		default: false
	},
	mb: {
		type: Boolean,
		default: false
	}
})
</script>
